<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>"红动"党费计算系统</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<style>
			.标题 {
				font-size: 60px;
				font-weight: 600;
				text-align: center;
			}

			.副标题 {
				position:relative;
				font-size: 20px;
				font-weight: 400;
				right:-80%;
				/* text-align: right; */
			}

			.表格样式 {
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
				width: 100%;
				border-collapse: collapse;
				font-size: 1.6em;
				border: 1px solid #98bf21;
				padding: 3px 7px 2px 7px;
				text-align: center;
				color: #000000;
				background-color: #EAF2D3;
				position: relative;
				/*添加相对定位*/
				top: 20px;
			}
			}

			.文字大小 {
				font-size: 30px;
			}

			.首行样式 {
				font-size: 1.1em;
				text-align: left;
				padding-top: 6px;
				padding-bottom: 4px;
				background-color: #A7C942;
				color: #ffffff;
				text-align: center;
			}

			.按钮层 {
				position: relative;
				/*添加相对定位*/
				top: 70px;
				height: 200px;
				width: 100%;
				text-align: center;
			}

			.按钮 {
				display: inline-block;
				padding: 16px 26px;
				font-size: 24px;
				cursor: pointer;
				text-align: center;
				text-decoration: none;
				outline: none;
				color: #fff;
				background-color: #4CAF60;
				border: none;
				border-radius: 16px;
				box-shadow: 0 9px #999;
			}

			.按钮:hover {
				background-color: #3e8e41
			}

			.按钮:active {
				background-color: #3e8e41;
				box-shadow: 0 6px #666;
				transform: translateY(4px);
			}

			.备注 {
				font-size: 15px;
				font-weight: 10;
			}
		</style>

		<script type="text/javascript">
			var 总计数 = 0;
			var 记录失业 = [];

			function 提示() {
				let 计数 = 1;
				for (计数; 计数 <= 总计数; 计数++) {
					let 工作状态 = document.getElementById("工作状态" + 计数).value;
					if (工作状态 == "无业") {
						let 判断 = 记录失业.indexOf(计数)
						if (判断 < 0) {
							alert("您选中无业选项，请将月应缴纳额填写至右侧”收入金额“输入框内。")
							//break;
							$("#应缴额" + 计数).prepend('<font id=计数' + 计数 + ' size=3px color="blue">月应缴金额：</font>');
							记录失业.splice(0, 0, 计数);
						}
					} else {
						console.log(计数);
						$("#计数" + 计数).remove();
						console.log("删除完成");
					}
				}
			}

			function 合并计算() {
				var 合计 = 0;
				for (var 计算计数 = 1; 计算计数 <= 总计数; 计算计数++) {
					/*相差月份计算*/
					var 开始 = document.getElementById("开始时间数据" + 计算计数).value;
					var 结束 = document.getElementById("结束时间数据" + 计算计数).value;
					var 开始年份 = Number(开始.substr(0, 4));
					var 开始月份 = Number(开始.substr(6, 2));
					var 结束年份 = Number(结束.substr(0, 4));
					var 结束月份 = Number(结束.substr(6, 2));
					var 相差月份 = (结束年份 - 开始年份) * 12 + (结束月份 - 开始月份 + 1);
					document.getElementById("月份" + 计算计数).innerHTML = 相差月份
					/*党费计算*/
					var 工作状态 = document.getElementById("工作状态" + 计算计数).value;
					var 收入金额 = Number(document.getElementById("收入金额" + 计算计数).value);
					var 应缴党费 = "请检查输入金额";
					if (工作状态 == "在职") {
						if (收入金额 <= "3000") {
							应缴党费 = 收入金额 * 0.005 * 相差月份;
						} else if (收入金额 <= "6000") {
							应缴党费 = 收入金额 * 0.01 * 相差月份;
						} else {
							应缴党费 = 收入金额 * 0.02 * 相差月份;
						}
					} else if (工作状态 == "退休") {
						收入金额 = 收入金额 * 0.3;
						if (收入金额 <= "5000") {
							应缴党费 = 收入金额 * 0.005 * 相差月份;
						} else {
							应缴党费 = 收入金额 * 0.01 * 相差月份;
						}
					} else {
						应缴党费 = 收入金额 * 100 * 相差月份 / 100;
					}
					document.getElementById("应缴党费" + 计算计数).innerHTML = 应缴党费
					合计 = 合计 + 应缴党费;
				}
				document.getElementById("总额").innerHTML = Math.ceil(合计);
			}

			function 新增缴费行() {
				for (计数 = 1; 计数 <= 10; 计数++) {
					总计数 = 总计数 + 1;
					$("#主体").append(
						'<tr class="123">' +
						'<td>' + 总计数 + '</td>' +
						'<td><input type="month" id="开始时间数据' + 总计数 + '"' + '></td>' +
						'<td><input type="month" id="结束时间数据' + 总计数 + '"' + '></td>' +
						'<td><select id="工作状态' + 总计数 + '" onchange="提示()">' +
						'<option>在职</option>' +
						'<option>退休</option>' +
						'<option>无业</option>' +
						'</select></td>' +
						'	<td id="应缴额' + 总计数 + '"><input type="text" id="收入金额' + 总计数 + '" placeholder="请输入金额"></td>' +
						'	<td id="月份' + 总计数 + '"' + '>待计算</td>' +
						'	<td id="应缴党费' + 总计数 + '">待计算</td>' +
						'</tr>')
				}
			}

			function 删除缴费行() {
				if (总计数 > 10) {
					for (计数 = 1; 计数 <= 10; 计数++) {
						$(".123:last").remove();
						总计数 = 总计数 - 1;
					}
				}
			}

			function 重置刷新() {
				window.location.reload();
			}
			window.onload = function() {
				新增缴费行();
			};
		</script>

	</head>
	<body>
		<div id="标题" class="标题">"红动"党费计算系统</div>
		<div id="标题" class="副标题">青岛地区定制版</div>
		<div id="计算">
			<table id="表格" border="2" class="表格样式">
				<thead>
					<tr id="首行" class="首行样式">
						<td>序号</td>
						<td>开始时间</td>
						<td>结束时间</td>
						<td>工作状态</td>
						<td>收入金额</td>
						<td>合计月份</td>
						<td>应缴党费</td>
					</tr>
				</thead>
				<tbody id="主体">
				</tbody>
				<tfoot>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>建议缴纳额：</td>
					<td id="总额">待计算</td>
				</tfoot>
			</table>

		</div>
		<div class="按钮层">
			<button id="增加行数据" class="按钮" onclick="新增缴费行()">新增缴费行</button>
			<button id="删除行数据" class="按钮" onclick="删除缴费行()">删除缴费行</button>
			<button id="合并计算" class="按钮" onclick="重置刷新()">重置刷新</button>
			<button id="合并计算" class="按钮" onclick="合并计算()">合并计算</button>
		</div>
		<div class="备注">
			备注：<br>
			1.本系统仅适配青岛地区党组织使用。<br>
			2.本系统内选择”工作状态“为”无业“时，请将月度应缴纳党费填入对应”收入金额“框内即可参与运算。<br>
			3.本系统默认选择缴纳月份为一个月。即在不选择开始月份与结束月份的情况下，默认以一个月为单控进行运算。<br>
			4.本系统需联网使用（若需未联网环境下使用，请联系定制）。
		</div>
	</body>
</html>
